<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        @click-left="$router.push('/home')"
        :title="id"
        left-arrow
       />
    </header>
    <div class="content" ref="cont">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="请输入价格区间:">
            <input type="text" class="min" placeholder="0" v-model="min">
            ~
            <input type="text" class="max" v-model="max">
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-card
        v-for="item in list"
        :key="item.proId"
        :num="item.stock"
        :price="item.price"
        :desc="item.introduce"
        :title="item.proName"
        :thumb="item.proImg"
        @click="fn(item.proId)"
      />
      <van-icon name="back-top" class="toTop" v-show="flag" @click="gotoTop" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage, Card, Icon, NavBar, DropdownMenu, DropdownItem, Cell, Button, Toast } from 'vant'
import { searchPro } from '../../api/index'

Vue.use(VanImage)
Vue.use(Card)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Cell)
Vue.use(Button)
Vue.use(Toast)

export default {
  props: ['id'],
  data () {
    return {
      searchList: [],
      loading: false,
      finished: false,
      i: 0,
      isLoading: true,
      flag: false,
      value: 0,
      option: [
        { text: '价格排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      min: null,
      max: null,
      list: []
    }
  },
  methods: {
    gotoTop () {
      this.$refs.cont.scrollTop = 0
    },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    },
    onConfirm () {
      this.$refs.item.toggle()
      // 数组的深拷贝
      // this.list = [...this.searchList]
      // this.list = this.searchList.slice(0)
      // this.list = JSON.parse(JSON.stringify(this.searchList))
      // this.list = Array.prototype.slice.call(this.searchList, 0)
      // console.log(this.list === this.searchList)
      this.list = this.searchList.map(val => val)
      if ((!this.min || !this.max) && this.min !== 0 && this.max !== 0) {
        Toast('缺少筛选范围')
      } else {
        this.list = this.list.filter(val => {
          return val.price <= Math.max(this.min, this.max) && val.price >= Math.min(this.min, this.max)
        })
      }
    }
  },
  mounted () {
    const that = this
    this.$refs.cont.addEventListener('scroll', function () {
      if (that.$refs.cont.scrollTop > 500) {
        that.flag = true
      } else {
        that.flag = false
      }
    })
    searchPro({
      search: this.id
    }).then(res => {
      this.searchList = res.data.data
      this.list = this.searchList
    })
  },
  watch: {
    value (a) {
      console.log(a)
      if (a === 1) {
        this.list.sort((a, b) => {
          return a.price - b.price
        })
      } else if (a === 2) {
        this.list.sort((a, b) => {
          return b.price - a.price
        })
      } else {
        // this.list = this.searchList
      }
    }
  }
}
</script>

<style lang="scss">
.van-nav-bar__right{
  font-size: 18px;
}
.van-nav-bar__title{
  width:65%;
  max-width:65%;
  .van-button{
    width:100%;
    height:0.3rem;
    color: #aaa;
    border-color: #aaa;
  }
}
.min,.max{
  width:0.5rem;
}
.toTop{
  position: fixed;
  bottom: 1rem;
  right: 0.4rem;
  font-size: 0.3rem;
  background: #fff;
  padding: 0.1rem;
  border-radius: 6px;
  border: solid 2px #eee;
}
</style>
